<template>
  <div class="search">
    <!-- 顶部导航 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- search -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键字"
      @search="onSearch"
      @input="suggestion"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 历史记录 -->
    <!-- 历史记录与联想区域只能共存1个，考虑用v-if来控制 -->
    <van-cell-group v-if="!value.trim()">
      <!-- 使用插槽来自定义内容 -->
      <van-cell>
        <template #title>
          <h4>历史记录</h4>
        </template>
        <template #right-icon>
          <van-icon name="cross" @click="clear" />
        </template>
      </van-cell>
      <!-- 历史记录的每一条数据 -->
      <van-cell v-for="(item, index) in historyList" :key="index" :title="item">
      </van-cell>
    </van-cell-group>
    <!--联想区域  -->
    <van-cell-group v-else>
      <van-cell>
        <template #title>
          <h4>联想区域</h4>
        </template>
      </van-cell>
      <van-cell
        v-for="item in list"
        :key="item.lightHight"
        @click="send(item.oldItem)"
      >
        <template #title>
          <span v-html="item.lightHight"></span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestionApi } from '@/api'

// import { debounce } from '@/utils/debounce'
export default {
  data () {
    return {
      value: '',
      list: [],
      valid: true,
      historyList: []
    }
  },
  methods: {
    send (item) {
      console.log(item)
      this.$router.push(`/results?key=${item} `)
      // 将搜索记录保存到本地
      // 将数组排序去重限长
      this.historyList.unshift(item)
      // 去重
      this.historyList = [...new Set(this.historyList)]
      // 限长
      this.historyList = this.historyList.slice(0, 4)
      window.localStorage.setItem(
        'historyList',
        JSON.stringify(this.historyList)
      )
    },
    onSearch () {
      // 当输入完内容之后点击搜索按钮，需要跳转到搜索结构页面,并且携带当前的value值
      this.$router.push(`/results?key=${this.value}`)
      // 将搜索记录保存到本地
      this.historyList = this.value
      window.localStorage.setItem(
        'historyList',
        JSON.stringify(this.historyList)
      )
    },
    suggestion () {
      // 清空输入框后会报错，给个判断
      // 利用防抖函数来解决输入框内容改变时，会一直发送网络请求
      // if (this.timer) {
      //   clearTimeout(this.timer)
      // }
      // this.timer = setTimeout(async () => {
      //   if (!this.value.trim()) {
      //     return
      //   }
      //   const res = await getSuggestionApi({
      //     q: this.value
      //   })
      //   console.log(res)
      //   //   将数据渲染到结构
      //   this.list = res.data.data.options
      //   // console.log(this.list)
      // }, 200)
      // _______________________________
      // 改造，用节流的思想完成上述代码
      if (!this.value.trim()) {
        return
      }
      if (!this.valid) {
        // 如果节流函数无效，则直接return
        return
      }
      // 函数有效
      setTimeout(async () => {
        const res = await getSuggestionApi({
          q: this.value
        })
        // console.log(res)
        //   将数据渲染到结构

        // this.list = res.data.data.options
        // 联想数据高亮
        // 定义一个不区分大小写的正则

        console.log(res)
        // 使用带样式的内容替换关键字
        const results = res.data.data.options.map((item) => {
          const reg = new RegExp(this.value, 'ig')
          // 注意this.value是变量，不需要用引号包裹起来
          console.log(item)
          const res = item.replace(
            reg,
            `<span style="color:red">${this.value}</span>`
          )
          console.log(res)
          return {
            lightHight: res,
            // 保存未替换的数据
            oldItem: item
          }
        })
        console.log(results)
        // 将results中数据保存到List中
        this.list = results
        // 渲染数据
        // 将valid值改为有效
        this.valid = true
      }, 2000)
      // 执行完一次函数将函数设置为无效
      this.valid = false
    },
    clear () {
      // 点击叉叉，清空本地历史记录数据
      this.$dialog
        .confirm({
          message: '确认清除码？'
        })
        .then(() => {
          window.localStorage.removeItem('historyList')
          this.historyList = ''
        })
    }
  },
  created () {
    // 打开页面时，从本地读取历史记录
    this.historyList =
      JSON.parse(window.localStorage.getItem('historyList')) || []
  }
}
</script>

<style></style>
